<template>
	<view class="p-50 p-t-30 left bg-change">
		<!-- <view class="title ts-48 m-t-50" :style="css.tcm">{{isInfo?'完善信息':'欢迎登录'}}</view>
		<view class="logo tc">
			<image :src="$xyfun.image(common.storeInfo.logo)" />
		</view> -->
		<text class="ts-60 tb wa left m-b-20" style="margin-top: 120rpx;">
			<text class="tc-green">君能</text>e站
		</text>
		<br>
		<!-- 微信登录 -->
		<text class="ts-30 wa left m-b-50">
			<text class="tc-gray">长途货运人的续航引擎</text>
		</text>
		<block v-if="isInfo && type === 3">
			<view class="user-list lh-100 flex p-b-15 m-b-2 bc-w wa">
				<text class="list-name">头像</text>
				<view class="r m-l-auto">
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="avatar" v-if="avatar != ''" />
						<text class="xyicon icon-right m-l-15"></text>
					</button>
					<!-- #endif -->
				</view>
			</view>
			<view class="user-list lh-70 flex p-tb-15 m-b-2 bc-w wa">
				<text class="list-name">昵称</text>
				<view class="flex r m-l-auto">
					<input class="br-10" :style="css.pbg" type="nickname" placeholder="请输入昵称~" @blur="blurNickName"
						maxlength="50" v-model="nickname" />
				</view>
			</view>
			<button :style="css.mcbg" class="ts-30 lh-30 p-35 tc-w m-t-50" @tap="profile()">确定</button>
			<button :style="css.mcbg" class="ts-30 lh-30 p-35 tc-w m-t-30" @tap="$Router.back()">跳过</button>
		</block>

		<block v-if="!isLogin && type === 3">

			<!-- #ifdef MP-WEIXIN -->
			<view class="member">
				<view class="m-t-30">
					<button v-if="isAgree" :style="css.mcbg" class="ts-30 lh-30 p-35 tc-w" open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">手机号快捷登录</button>
					<button :style="css.mcbg" v-else class="ts-30 lh-30 p-35 tc-w"
						@tap="$xyfun.msg('请阅读并同意《隐私政策》')">手机号快捷登录</button>
					<button @tap="toHome()" class="ts-30 lh-30 p-35 tc-w no-login" >暂不登录</button>
				</view>
				<view class="flex p-tb-30 tc lh-50 ts-26" :style="css.tcl">
					<view class="agree flex " @tap="isAgree=!isAgree">
						<!-- <text class="xyicon icon-radio-a ts-24 flex tb" v-if="isAgree"></text>
						<text class="xyicon icon-radio ts-30 flex tb" v-else></text> -->
						<checkbox-group style="display: inline-block; margin: -1rpx -10rpx 0;">
							<label>
								<checkbox :checked="isAgree" color="#005650" style="transform:scale(0.7);"/>
							</label>
						</checkbox-group>
						<text class="m-l-10 ts-26">我已阅读并同意</text>
					</view>
					<text class="ts-26 tb" :style="css.tcmc" @tap="see(1)">《用户协议》</text> 和 <text :style="css.tcmc"
						@tap="see(2)" class="ts-26 tb">《隐私政策》</text>
				</view>
			</view>
			<!-- #endif -->

		</block>

		<!-- 验证码登录 -->
		<view v-if="type === 1" class="left">
			<form>
				<view class="form-item" style="margin-top: 0rpx;">
					<input style="padding-left: 126rpx; width: 522rpx;" class="form-input" type="text" v-model="mobile" placeholder="手机号"/>
					<input class="form-count" value="+86" disabled />
				</view>
				<view class="form-item">
					<input style="width: 380rpx; float: left;" class="form-input" type="text" v-model="code" placeholder="验证码"/>
					<view class="form-input form-input-btn" @click="sendCode()">
						{{ disabledBtn ? code_num + 's' : '发送验证码' }}
					</view>
				</view>
			</form>
		</view>
		<!-- 密码登录 -->
		<view v-if="type === 2" class="left">
			<form>
				<view class="form-item" style="margin-top: 0rpx;">
					<input style="padding-left: 126rpx; width: 522rpx;" class="form-input" type="text" v-model="mobile" placeholder="手机号"/>
					<input class="form-count" value="+86" disabled />
				</view>
				<view class="form-item">
					<input style="float: left;" class="form-input" type="text" v-model="password" placeholder="密码"/>
				</view>
			</form>
		</view>
		<view v-if="type === 2 || type===1" class="left" style="width: 650rpx;">
			<view class="m-t-40">
				<button v-if="isAgree" @tap="submit()" :style="css.mcbg" style="border-radius: 15rpx; " class="ts-30 lh-30 p-35 tc-w" >登录</button>
				<button v-else @tap="$xyfun.msg('请阅读并同意《隐私政策》')" :style="css.mcbg" style="border-radius: 15rpx; " class="ts-30 lh-30 p-35 tc-w" >登录</button>
				<button @tap="toHome()" class="ts-30 lh-30 p-35 tc-w no-login" >暂不登录</button>
			</view>
			<view class="flex p-tb-30 tc lh-50 ts-26" :style="css.tcl">
				<view class="agree flex " @tap="isAgree=!isAgree">
					<checkbox-group style="display: inline-block; margin: -1rpx -10rpx 0;">
						<label>
							<checkbox :checked="isAgree" color="#005650" style="transform:scale(0.7);"/>
						</label>
					</checkbox-group>
					<text class="m-l-10 ts-26">我已阅读并同意</text>
				</view>
				<text class="ts-26 tb" :style="css.tcmc" @tap="see(1)">《用户协议》</text> 和 <text :style="css.tcmc"
					@tap="see(2)" class="ts-26 tb">《隐私政策》</text>
			</view>
		</view>
		<view class="login-type">
			<view class="login-type-view" v-if="type !== 1" @click="type = 1">
				<img src="/static/img/login/code1.png" />
			</view>
			<view class="login-type-view" v-if="type !== 2" @click="type = 2">
				<img src="/static/img/login/password1.png" />
			</view>
			<view class="login-type-view" v-if="type !== 3" @click="type = 3">
				<img src="/static/img/login/weixin.png" />
			</view>
		</view>
		
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import graceChecker from '@/utils/graceChecker';
	import http_config from '@/config/http';
	export default {
		data() {
			return {
				loginType: '',
				isLogin: false,
				isInfo: false,
				isAgree: false,
				css: {},
				avatar: '',
				nickname: '',
				captcha: '',
				userInfo: {},
				submitDisabled: false,
				disabledCode: false,
				codeText: '获取验证码',
				loginRes: {},
				type: 1, // 1:手机号登录，2：密码登录	3：微信登录

				mobile: '',
				password: '',
				code: '',
				code_num: 60,
				disabledBtn: false,
				timer: null
			};
		},
		computed: {
			...mapState(['common', 'user'])
		},
		onLoad() {
			this.$xyfun.setNavBar(' ');
			this.css = this.$xyfun.css();

			if (this.user.isLogin) {
				this.$xyfun.back('已经登录');
			}

			// 微信小程序code提前获取
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: res => {
					console.log(res);
					this.loginRes = res;
				},
				fail: err => {
					this.$xyfun.msg(err.msg);
				}
			});
			// #endif

		},
		onshow() {
			clearInterval(this.timer);
		},
		methods: {
			toHome() {
				this.$xyfun.to('/pages/index');
				// uni.reLaunch({
				// 	url: '/pages/index'
				// })
			},
			// 验证码 密码
			submit() {
				let data = {
					mobile: this.mobile,
				}
				if (this.type === 1) {
					data.code = this.code
				} else {
					data.password = this.password
				}
				this.$api.post({
					url: this.type === 1 ? '/user/user/codeLogin' : '/user/user/passwordLogin',
					loadingTip:'加载中...',
					data,
					success: res => {
						if (res.userInfo.is_info == 1) {
							this.userInfo = res.userInfo;
							this.isLogin = true;
							this.isInfo = res.userInfo.is_info;
							this.$store.dispatch('user/login', res)
						} else {
							this.$store.dispatch('user/login', res)
							this.$Router.back();
						}
					}
				})
			},
			sendCode() {
				const regex = /^1[3-9]\d{9}$/
  				if (!regex.test(this.mobile)) {
					this.$xyfun.msg('请输入正确的手机号');
					return
				}
				if(!this.disabledBtn) {
					this.disabledBtn = true
					this.timer = setInterval(function() {
						if (that.code_num == 0) {
							that.disabledBtn = false
							that.code_num = 60
						} else {
							that.code_num--
						}
					}, 1000);
					let that = this
					this.$api.get({
						url: '/user/user/sendCode',
						loadingTip:'加载中...',
						data: {
							mobile: this.mobile,
						},
						success: res => {
							console.log(res)
						}
					});
				}
				
			},
			blurNickName(e) {
				if (e.detail.value) this.nickname = e.detail.value;
			},


			// 微信小程序手机号授权登录
			decryptPhoneNumber(e) {
				console.log(e);
				this.$api.post({
					url: '/user/user/phone',
					data: {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						code: this.loginRes.code,
					},
					success: res => {
						if (res.userInfo.is_info == 1) {
							this.userInfo = res.userInfo;
							this.isLogin = true;
							this.isInfo = res.userInfo.is_info;
							this.$store.dispatch('user/login', res);
						} else {
							this.$store.dispatch('user/login', res);
							this.$Router.back();
						}

					}
				});
			},

			onChooseAvatar(e) {
				this.uploadImage(e.detail.avatarUrl);
			},

			// 图片处理-选择图片
			async chooseImage() {
				var that = this;
				console.log('选择图片');
				uni.chooseImage({
					count: 1,
					sizeType: ["original", "compressed"],
					sourceType: ["album"],
					success: res => {
						that.uploadImage(res.tempFilePaths[0])
					}
				});
			},

			// 上传图片
			async uploadImage(url) {
				var that = this;
				uni.showLoading({
					title: '图片上传中...'
				})
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: http_config.base_url + "/api/common/upload",
						filePath: url,
						name: "file",
						header: {
							token: that.userInfo.token
						},
						success: res => {
							res = JSON.parse(res.data);
							that.avatar = res.data.fullurl;
							resolve(res.data.fullurl);
						},
						fail: res => {
							uni.hideLoading();
							that.$xyfun.msg('图片上传失败！');
							this.avatar = '';
							console.log(res);
						},
						complete: e => {
							uni.hideLoading();
						}
					});
				}).catch(e => {
					console.log(e);
				});
			},

			see(type) {
				if (type == 1 && this.common.appConfig.agreement > 0) {
					this.$xyfun.to('/pages/service/article/detail?id=' + this.common.appConfig.agreement);
				}
				if (type == 2 && this.common.appConfig.privacy > 0) {
					this.$xyfun.to('/pages/service/article/detail?id=' + this.common.appConfig.privacy);
				}
			},

			//完善信息
			profile() {

				var data = {
					avatar: this.avatar,
					nickname: this.nickname,
				}

				//定义表单规则
				var rule = [{
						name: 'avatar',
						checkType: 'string',
						checkRule: '1,300',
						errorMsg: '头像不能为空'
					},
					{
						name: 'nickname',
						checkType: 'string',
						checkRule: '2,20',
						errorMsg: '昵称为2-20个字符'
					},

				];

				//进行表单检查
				var checkRes = graceChecker.check(data, rule);

				if (checkRes) {
					this.$api.post({
						url: '/user/user/profile',
						loadingTip: '加载中...',
						data: {
							nickname: this.nickname,
							avatar: this.avatar,
						},
						success: res => {
							this.$store.dispatch('user/login', res);
							this.$Router.back();
						}
					});
				} else {
					this.$xyfun.msg(graceChecker.error);
					this.submitDisabled = false;
				}
			},

		}
	};
</script>

<style scoped lang="scss">
	.no-login {
		border-radius: 15rpx; 
		background-color: rgba(255,255,255,0.63); 
		color: #8a8686; 
		margin-top: 30rpx;
	}
	.logo image {
		width: 180rpx;
		height: 180rpx;
		margin: 100rpx;
	}

	button::after {
		border: none;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.user-list {
		flex-wrap: nowrap;

		.list-name {
			width: 20%;
			flex-shrink: 0;
		}

		.code {
			flex-shrink: 0;
			width: 180rpx;
			height: 78rpx;
			line-height: 78rpx;
			text-align: center;
			margin-left: 20rpx;
		}

		.r {
			width: 100%;

			input {
				width: 100%;
				vertical-align: middle;
				line-height: 78rpx;
				height: 78rpx;
				padding-left: 20rpx;
			}

			button {
				padding: 0;
				margin: 0;
				background: none;
				float: right;
				border-radius: 0;
				width: 100%;
				text-align: right;
			}
		}
	}

	.tips {
		justify-content: center;
	}

	.form-submit {
		margin: 35rpx 0 50rpx;
		width: 649rpx;
		height: 100rpx;
		border-radius: 15rpx;
		background-color: rgba(0, 86, 80, 1);
		text-align: center;
		color: white;
		line-height: 95rpx;
		float: left;
	}

	.bg-change {
		height: 100vh;
		width: 650rpx;
		background-image: linear-gradient(white, rgba(0, 86, 80, 0.53));
	}
	.login-type {
		width: 650rpx;
		height: 150rpx;
		float: left;
		position: fixed;
		bottom: 150rpx;
		display: flex;
		justify-content: center;
		.login-type-view {
			width: 100rpx;
			height: 100rpx;
			background-color: rgba(255,255,255,0.42);
			border-radius: 50rpx;
			text-align: center;
			line-height: 91rpx;
			float: left;
			margin-right: 60rpx;
			img{
				width: 50rpx;
				height: 50rpx;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.form-item {
		width: 100%;
		position: relative;
		margin-top: 35rpx;
		float: left;
		.form-item-title {
			left: 26rpx;
			top: 30rpx;
			color: rgba(102, 102, 102, 0.87);
		}
		.form-item-pic {
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			height: 450rpx; 
			border-radius: 15rpx; 
			overflow: hidden;
			.form-item-pic1 {
				border: 1rpx dashed rgba(187,187,187,0.31); 
				height: 330rpx; 
				border-radius: 15rpx; 
				width: 590rpx;
				margin: 25rpx;
				line-height: 329rpx;
				margin-top: 90rpx;
			}
			.form-item-open {
				height: 330rpx; 
				margin: 25rpx;
				width: 590rpx;
				margin-top: 90rpx;
			}
			.form-item-del {
				top: 30rpx;
				right: 50rpx;
			}
			.form-item-img {
				width: 50rpx;
				height: 50rpx;
			}
			.form-item-sf {
				width: 500rpx;
				height: 290rpx; 
			}
		}
		.form-input {
			width: 622rpx;
			height: 100rpx;
			border-radius: 15rpx;
			background-color: rgba(255,255,255,1);
			border: 1rpx solid rgba(111, 111, 111, 0.31);
			padding-left: 26rpx;
		}
		.form-input-btn {
			width: 210rpx; 
			float: right; 
			padding: 0; 
			text-align: center; 
			line-height: 96rpx;
		}
		.placeholder-color {
			color: rgba(135,135,135,0.48);
		}
		.form-count {
			position: absolute;
			width: 60rpx;
			height: 100rpx;
			top: 0rpx;
			left: 50rpx;
			border-top: 1rpx solid rgba(111, 111, 111, 0.31);
			border-bottom: 1rpx solid rgba(111, 111, 111, 0.31);
			background-color: rgba(255,255,255,1);
		}
	}
</style>